import styles from '@/views/Login/login.module.scss'
import init from '@/views/Login/init'
import { ChangeEvent, useEffect, useState } from 'react'
import { Input, Space, Button, message } from 'antd'
import './login.scss'
import { Link,useNavigate } from 'react-router-dom'
import { CaptchaAPI, LoginAPI } from '@/request/api'
// import {CaptchaAPI,LoginAPI} from "@/request/api"
import VerificationCode from './yanzhengma.js'
const View = () => {
  let navigateto=useNavigate()
  useEffect(() => {
    init();
    window.onresize = function () { init() }
    getCaptchaImg();
    // VerificationCode(option)
    // settxt()
    setTxt(VerificationCode(option))
    // console.log(VerificationCode(option));
    setUsertxt(txt)
    setNameval('qdtest1')
    setPwdval('123456')
    setCaptchaval('888888')
  }, []);

  // const getCaptchaImg = async ()=>{
  //   // 做验证码的请求
  //   // CaptchaAPI().then((res)=>{
  //   //   console.log(res);
  //   // })
  //   let captchaAPIRes = await CaptchaAPI();
  //   console.log(captchaAPIRes);
  //   if(captchaAPIRes.code===200){
  //     // 1、把图片数据显示在img上面
  //     setCaptchaImg("data:image/gif;base64,"+captchaAPIRes.img)
  //     // 2、本地保存uuid，给登录的时候用
  //     localStorage.setItem("uuid",captchaAPIRes.uuid)
  //   }
  const [nameval, setNameval] = useState('')
  const [pwdval, setPwdval] = useState('')
  const [captchaval, setCaptchaval] = useState('')
  const [captchaImg, setCaptchaImg] = useState("");
  const [txt, setTxt] = useState("");
  const [usertxt, setUsertxt] = useState("");
  const name = (e: ChangeEvent<HTMLInputElement>) => {
    // console.log(e.target.value);
    setNameval(e.target.value)
  }
  const pwd = (e: ChangeEvent<HTMLInputElement>) => {
    // console.log(e.target.value);
    setPwdval(e.target.value)
  }
  const usert = (e: ChangeEvent<HTMLInputElement>) => {
    // console.log(e.target.value);
    setUsertxt(txt)
    // setUsertxt(e.target.value)
  }
  const captchaChange = (e: ChangeEvent<HTMLInputElement>) => {
    setCaptchaval(e.target.value);
  }
  var option = {
    // dom: 'mycanvas',
    type: 2,
  }
  const gotologin = async () => {
    // console.log(nameval, pwdval, captchaval);
    // console.log(VerificationCode(option));
    // if (txt!==captchaval) {
    //   return
    // }else{
    //   console.log('第一个验证码为',true);
    // }
    if (nameval.trim()!='qdtest1'|| pwdval.trim() !='123456'|| captchaval.trim()!='888888'|| txt!=usertxt) {
      message.error('请输入正确的信息')
      return
    } 
    else {
      setUsertxt('')
      let loginapires = await LoginAPI({
        username: nameval,
        password: pwdval,
        code: captchaval,
        uuid: localStorage.getItem('uuid') as string
      })
      console.log(loginapires);
      if (loginapires.code == 200) {
        message.success('登陆成功', 2)
        localStorage.setItem('token', loginapires.token)
        navigateto('/page1')
        localStorage.removeItem('uuid')
      }

    }
  }
  const getcaptchabox = () => {
    CaptchaAPI().then((res) => {
      // console.log(res);
    })
  }
  const getCaptchaImg = async () => {
    // 做验证码的请求
    // CaptchaAPI().then((res)=>{
    //   console.log(res);
    // })
    let captchaAPIRes = await CaptchaAPI();
    // console.log(captchaAPIRes);
    if (captchaAPIRes.code === 200) {
      // 1、把图片数据显示在img上面
      setCaptchaImg("data:image/gif;base64," + captchaAPIRes.img)
      // 2、本地保存uuid，给登录的时候用
      localStorage.setItem("uuid", captchaAPIRes.uuid)
    }
  }
  const reloadcanvas = () => {
    setTxt(VerificationCode(option))
  }

  return (
    <div className={styles.login}>
      <canvas id="canvas" style={{ display: "block" }}></canvas>
      <div className={styles.loginBox + " loginbox"}>
        <div className={styles.title}>
          <h1>前端鑫哥&nbsp;·&nbsp;通用后台系统</h1>
          <p>Strive Everyday</p>
        </div>
        <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
          <Input placeholder="用户名" onChange={name}   value={nameval}/>
          <Input.Password placeholder="密码" onChange={pwd} value={pwdval}/>
          <div className='captchabox'>
            <Input placeholder="验证码" onChange={usert} value={usertxt}/>
            <canvas id="mycanvas" onClick={reloadcanvas}></canvas>
          </div>
          {/* <canvas id="auth-code"></canvas> */}
          {/* <div className="captchaImg" onClick={getCaptchaImg}>
                  <img height="38" src={captchaImg} alt="" />
                </div> */}
          <div className="captchaBox2" onClick={getcaptchabox}>
            <Input placeholder="验证码" onChange={captchaChange} value={captchaval}/>
            <div className="captchaImg" onClick={getCaptchaImg}>
              <img height="32" width='100' src={captchaImg} alt="" />
            </div>
          </div>
          <Button type="primary" block onClick={gotologin}>登录</Button>
          {/* <Link to={"/page1"}>page1</Link> */}
        </Space>
      </div>
    </div>
  )
}
export default View